<template>
	<view class="bg" :style="{ '--bg-image': `url(${daziBg1})` }">
		<!-- <view :style="{ height: heightSystemss*2 + 'rpx' }"></view> -->


		<!-- 	<sunui-navbar v-if="tabList.length>=1" :items="tabList" lineHeight="70rpx" :isCenter="false"
			:currentIndex="currentIndex" padding="12rpx" activeColor="#000000" :size="65" activeLineBg="#785DF6"
			textAlign="center" activeLineWidth="100%" activeDirection="space-between" activeLineHeight="6rpx"
			bgColor="transparent" :margin="10" @change="e=>getChange(e,tabList[e].id)"></sunui-navbar> -->

		<!-- 搜索框 -->
		<view class="search-content">
			<image class="address-img" :src="dw" mode=""></image>
			<text>{{userInfo.city_name?userInfo.city_name:'--'}}</text>
			<text style="margin-left: 20rpx;color:rgb(224 218 218);">|</text>
			<image class="search-img" :src="search" mode=""></image>
			<input placeholder="请搜索搭子标题名称" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
				style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />

		</view>
		<view class="carouselChart">
			<liu-slide-img :list="listPoster" :autoplay="autoplay" :interval="interval"
				@click="clickSlideImg"></liu-slide-img>
		</view>
		<view class="buildContainer">
			<view class="flex-between margin-top_20rpx margin-bottom_20rpx" style="margin-top: 40rpx;">
				<view class="flex-align-center">
					<view class=" line">

					</view>
					<view class="font-weight">
						今日推荐
					</view>
				</view>
				<view style="color: #999999;font-size: 26rpx;" @click="viewMoreFn()">
					查看更多
					<uni-icons color="#999" type="right" size="15"></uni-icons>
				</view>
			</view>

			<view class="tabsPosition">
				<v-tabs v-model="cIndex" :tabs="tabs" @classifyListNav=classifyListNav :lineHeight="rpxNumber50+'rpx'"
					:pillsBorderRadius="rpxNumber+'rpx'" bgColor="transparent" line-height="0" activeColor="#fff"
					:pills="pillsBol" @change="e=>changeTab(e,tabsList[e].id)" fontSize="28rpx"></v-tabs>

				<view class="flex-end sortPosition" style="color:#060606" @click="sortFn()">
					排序
					<uni-icons color="#060606" type="down" size="15"></uni-icons>
				</view>

			</view>
			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<view class="buildList" v-for="(item,index) in list" :key="index" @click="goDeatilFn(item.id)">
					<view class="flex-end-top ">
						<view class="">
							<image class="orderImg" :src="item.img" mode=""></image>
						</view>
						<view class="margin-left_16rpx flex-columna" style="width:454rpx;height:200rpx;">
							<view class="flex-start-center">
								<view class="topMounted flex" v-if="item.is_top==1">
									<text>顶置</text>
								</view>
								<view class="font-overflow font-weight font30" style="width:100%;margin-left: 8rpx;">
									{{item.title}}

								</view>
							</view>

							<view class="flex-between">
								<view class=" font-overflow flex-start-center" style="max-width:434rpx">
									<image class="tagImg" :src="item.pt_label_icon" mode="widthFix"></image>
									<view class="" v-for="(content,index) in item.labelList" :key="index">
										<view v-if="index<2" class="tagTitleOrange  flex">
											{{content}}
										</view>
									</view>
								</view>
								<image class="addImg" :src="addicon" mode="aspectFit"></image>
							</view>

							<view class="flex-between">
								<view class="flex-start-center ">
									<image class="avaterImg" :src="item.avatar" mode=""></image>
									<text class="font-overflow" style="width: 60rpx;">{{item.nickname}}</text>
								</view>
								<view class="flex-start-center">
									<view class="flex-between v-p-share" v-if="item.join_data.length">
										<view class="v-m-width not-font-overflow flex1">
											<block v-for="(img, index) in item.join_data" :key="index">
												<image v-if="index<4" class="pt_img" :src="img.avatar"></image>
											</block>
											<image class="pt_img" :src="headDazi"
												mode=""></image>
										</view>

									</view>

									
								</view>
								<view class="" style="color: rgb(234, 72, 13);" v-if="item.sex==1">
									<text>{{item.people_number}}搭,差{{item.people_number-item.join_data.length}}人</text>
								</view>
								<view class="" style="color: rgb(234, 72, 13);" v-if="item.sex==2">
									<text>{{(item.woman_number)+(item.man_number)}}搭,差{{((item.woman_number)+(item.man_number))-item.join_data.length}}人</text>
								</view>
							</view>
						</view>

					</view>
					<view style="margin-top: 15rpx;display: flex;justify-content: space-between;width: 100%;">
						<view class="flex">
							<image class="timingImg" src="../../static/path.png" mode=""></image>
							<cc-countdown color="#FFF"
								background-color="#A561FF" splitorColor="#A561FF" :showColon="true" :showDay="true"
								:day="item.expire_timeObject.days" :hour="item.expire_timeObject.hours"
								:minute="item.expire_timeObject.minutes" :second="item.expire_timeObject.seconds"
								@timeup="timeup"></cc-countdown>
						</view>

					<!-- 	<view class="location flex" v-if="item.distance_kilometer">
							<image class="addressImg" :src="dwBlue" mode=""></image>
							<text>{{item.distance_kilometer}}km</text>
						</view> -->
						<view class=" flex" style="color: #999999;" v-if="item.distance_kilometer">
							<image class="addressImg" :src="dwBlue" mode=""></image>
							<text class="font-overflow" style="max-width: 150rpx;">{{item.address}}</text>
							<text class="padding_0_10rpx">|</text>
							<text>{{item.distance_kilometer}}km</text>
						</view>
					</view>
				</view>
			</mescroll-body>

			<view style="height: 120rpx;">

			</view>
	
		</view>



		<!-- <tqb-tabbar activeIndex="1" /> -->


	</view>
</template>

<script>
	// import tqbTabbar from '../../components/tqb-tabbar/tqb-tabbar.vue'
	export default {
		props: ['show', 'sortFilter'],
		components: {
			// tqbTabbar,
		},
		data() {
			return {
                daziBg1:this.$img.daziBg1,
				addicon: this.$img.addicon,
				dwBlue: this.$img.dwBlue,
				search: this.$img.search,
				dw: this.$img.dw,
				headDazi:this.$img.headDazi,
				value: 1,
				userInfo: uni.getStorageSync("userInfo"),
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				windowHeight: 0,
				pillsBol: true,
				rpxNumber: 40,
				rpxNumber50: 50,


				title: 'Hello',
				currentIndex: 0,
				cIndex: 0,
				heightSystemss: 0,

				searchVal: '',
				autoplay: true,
				interval: 3000,
				listPoster: [],
				tabs: [''],

				labelList: [],
				list: [],
				tabsList: [],
				son_tab: null,
				detailInfo: [],
				tabList: [{
						name: '搭子',
						id: '1' //null
					}, {
						name: '圈子',
						id: '2' //null
					},

					{
						name: '服务',
						id: '3' //null
					},
					{
						name: '社交',
						id: '4' //null
					},
					{
						name: '关注',
						id: '5' //null
					},
					{
						name: '社群',
						id: '6' //null
					},

				],

				orderStatusArr: [{
						value: '全部',
						id: 0
					},

					{
						value: '今日',
						id: 1
					},

					{
						value: '前七天',
						id: 2
					},

					{
						value: '最近一个月',
						id: 3
					},

				],
				userInfoObject: {},
				sort: '',
				dimension: '',
				longitude: ''
			}
		},
		onLoad(options) {
			// console.log(options)
			// // this.createdgetSystemInfo()
			// this.init()
			// this.tabClassIfyFn()
           
			// uni.getSystemInfo({
			// 	success: (res) => {
			// 		this.windowHeight = res.windowHeight * 2 - 1500;
			// 	}
			// });

		},

		watch: {
			show: function(value) {

				if (uni.getStorageSync("tabClassIfy")) {

					console.log(uni.getStorageSync("tabClassIfy"))
					this.son_tab = uni.getStorageSync("tabClassIfy").id

					console.log(this.tabs)

					const findIndex = this.tabs.findIndex((item) => {
						return item == uni.getStorageSync("tabClassIfy").name
					})
					if (findIndex == -1) {
						this.cIndex = -1
						this.pillsBol = false
						this.rpxNumber = 0
						this.rpxNumber50 = 0
					} else {
						this.cIndex = findIndex
					}
					this.$nextTick(() => {
						this.mescroll?.resetUpScroll();
					})

					setTimeout(() => {
						uni.removeStorageSync('tabClassIfy')
					}, 1000)
				} else {
					// this.$nextTick(() => {
					// 	this.mescroll?.resetUpScroll();
					// })
					
					this.tabClassIfyFn()
				}

			},
			sortFilter: function(value) {
				this.sort = value
				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})

			}
		},
		created() {
			// this.getLocations()
			this.cIndex = 1
			// setTimeout(() => {
            // this.userInfoFn()
			// 	this.cIndex = 0
			// 	console.log(this.cIndex, 
			// }, 500)
			// this.createdgetSystemInfo()
			this.init()
			this.tabClassIfyFn()
            console.log(window.location.hostname,'wsss')
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight - 1200;
				}
			});

		
			setTimeout(() => {
				this.userList()
			}, 800)
			console.log('createdcreatedcreated')
		},
		mounted() {


		},
		beforeDestroy() {
			// //停止心跳检测
			// this.socket.stopHeartbeat()
			// //退出页面关闭websocket
			// this.socket.close({
			// 	success(res) {

			// 		console.log("关闭成功", res)
			// 	},
			// 	fail(err) {
			// 		console.log("关闭失败", err)
			// 	}
			// })
		},
		// onShow() {
		// 	setTimeout(() => {
		// 		this.mescroll?.resetUpScroll();
		// 	}, 500)
		// },

		methods: {
			authorityFn(index) {
				if (!(index == 3)) {
					this.sort = index
					this.$refs.modifyEmployeeInfo.close()

				} else {
					this.sort = ''
					this.$refs.modifyEmployeeInfo.close()
				}
				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})
			},
			sortFn() {
				this.$emit('sortBol', true)

			},
			async userList() {
				const result = await this.$http.post({
					url: this.$api.userList,
					data: {
						page: 1,
						limit: 100,
						id:this.userInfo.id,
						

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})


				if (result.code == 0) {


					uni.setStorageSync('socialList', result.data.list);


				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			changeInput(e) {
				console.log(e)
				this.searchVal = e.detail.value
				this.mescroll?.resetUpScroll();
			},
			async upCallback(scroll) {

				if (this.son_tab) {
					const result = await this.$http.post({
						url: this.$api.daziList,
						data: {
							page: scroll.num,
							limit: 100,
							son_tab: this.son_tab,
							title: this.searchVal,
							oneself_uid: this.userInfo.id ? this.userInfo.id : '',
							dazi_sort_rule: this.sort,
							dimension:this.userInfo.dimension?this.userInfo.dimension:'',
							longitude:this.userInfo.longitude?this.userInfo.longitude:''

						},
						headers: {
							'Authorization': this.userInfo.token
						}

					})


					if (result.code == 0) {

						this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
						if (scroll.num == 1) this.list = [];

						this.list = this.list.concat(result.data.list);

						this.list.forEach((item) => {
							item.expire_timeObject = this.formatTimeDifference(item.expire_time)
							item.labelList = item.label.split(",")
						})



						console.log('this.list', this.list, this.list.length);
					} else {
						this.$sun.toast(result.message, 'none')
					}
				} else {
					const result = await this.$http.post({
						url: this.$api.daziList,
						data: {
							page: scroll.num,
							limit: 100,
							son_tab: this.son_tab,
							dimension:this.userInfo.dimension?this.userInfo.dimension:'',
							longitude:this.userInfo.longitude?this.userInfo.longitude:'',
							title: this.searchVal,
							oneself_uid: this.userInfo.id ? this.userInfo.id : '',
							dazi_sort_rule: this.sort

						},
						headers: {
							'Authorization': this.userInfo.token
						}

					})


					if (result.code == 0) {

						this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
						if (scroll.num == 1) this.list = [];

						this.list = this.list.concat(result.data.list);

						this.list.forEach((item) => {
							item.expire_timeObject = this.formatTimeDifference(item.expire_time)
							item.labelList = item.label.split(",")
						})



						console.log('this.list', this.list, this.list.length);
					} else {
						this.$sun.toast(result.message, 'none')
					}
				}


			},
			formatTimeDifference(timestamp) {
				// 获取当前时间的时间戳（以秒为单位）
				const currentTimestamp = Math.floor(Date.now() / 1000);

				// 计算时间差（以秒为单位）
				let timeDifference = timestamp - currentTimestamp;

				// 计算天数
				const days = Math.floor(timeDifference / (24 * 60 * 60));
				timeDifference %= (24 * 60 * 60);

				// 计算小时
				const hours = Math.floor(timeDifference / (60 * 60));
				timeDifference %= (60 * 60);

				// 计算分钟
				const minutes = Math.floor(timeDifference / 60);

				// 剩余的秒数
				const seconds = timeDifference % 60;

				return {
					days: days,
					hours: hours,
					minutes: minutes,
					seconds: seconds
				};
			},
			classifyListNav() {
				console.log('点击了')
				this.$sun.navGo('/pagesB/index/classifyAll', {
					type: 1
				})
			},
			goDeatilFn(id) {
				console.log(id)
				this.$sun.navGo('/pagesB/index/buildSubDetail', {
					id: id
				})
			},
			viewMoreFn() {

				this.$sun.navGo('/pagesB/index/buildSubList')
			},
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			getChange(index, e) {
				console.log(index, e)

				this.currentIndex = index

				this.$sun.navGo('/pages/index/wechatMoments')

			},
			// 点击轮播图
			clickSlideImg(e) {
				// 跳本地 ， 2 跳h5 ，3 跳小程序
				if (e.jump_way == 1) {
					this.$sun.toast('目前暂不支持本地跳转', 'none')
				} else if (e.jump_way == 2) {
					window.location.href = e.link
				}

			},
			getLocations() {
				console.log('123')
				uni.getLocation({
					// 将wgs84 改为 gcj02  h5提高精确度
					type: 'wgs84',
					//  geocode: true,   address：地址信息（仅App端支持，需配置geocode为true）
					success: async res => {
						console.log(res)


						this.updateAddressFn(res.longitude, res.latitude)

					},
					fail: res => {
						console.log('123', res)
						this.dimension = res.latitude;
						this.longitude = res.longitude;
					}
				});
			},
			async updateAddressFn(longitude, latitude) {
				const res = await this.$http.post({
					url: this.$api.updateAddress,
					data: {
						dimension: latitude,
						longitude: longitude


					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (res.code == 0) {

					this.dimension = latitude;
					this.longitude = longitude;
					this.$sun.toast(res.message, 'none')
					// 掉用户详情获取城市名字
					this.userInfoFn()

				} else {

					this.$sun.toast(res.message, 'none')
				}
			},
			async userInfoFn() {
				const result = await this.$http.post({
					url: this.$api.userInfo,
					data: {




					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (result.code == 0) {
					console.log('data', result.data);
					this.userInfoObject = result.data
					wx.setStorageSync('userInfo', this.userInfoObject);
					// this.$nextTick(() => {
					// 	this.mescroll?.resetUpScroll();
					// })

				}
			},
			async tabClassIfyFn() {
				console.log(this.userInfo.token)
				const resPoster = await this.$http.post({
					url: this.$api.tabList,
					data: {

						type: 1,
						// pid:0,
						top: 1

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (resPoster.code == 0) {
					console.log(resPoster.data.list, '111')
					resPoster.data.list.unshift({
						id: '',
						name: '全部'
					})
					this.tabsList = resPoster.data.list

					if (resPoster.data.list.length) {
						this.son_tab = resPoster.data.list[0].id
					}
					console.log(this.tabsList, 'this.tabsList')
					this.tabs = resPoster.data.list.slice(0, 5).map((item) => {
						return item.name;
					});

					this.$nextTick(() => {
						this.cIndex = -1
						this.mescroll?.resetUpScroll();
						setTimeout(() => {
							this.cIndex = 0
						}, 200)
					})

				} else {

					this.$sun.toast(resPoster.message, 'none')
				}
			},
			// 获取轮播图
			async init() {
				const resPoster = await this.$http.post({
					url: this.$api.poster,
					data: {

						type: 3

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (resPoster.code == 0) {

					// 	// 展示区域  1 首页 2 商城 3 套餐卡市场 这里还需要区分

					this.listPoster = resPoster.data.filter(item => item.type == 3);
					console.log(this.listPoster)




				} else {

					this.$sun.toast(resPoster.message, 'none')
				}



			},

			changeTab(index, id) {
				console.log('当前选中的项：' + index, id)
				this.son_tab = id
				this.pillsBol = true
				this.rpxNumber = 40
				this.rpxNumber50 = 50
				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})

			}

		}
	}
</script>

<style lang="less" scoped>
	.moreActiveButton {


		background-color: #fff;

		.flex-center() {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.moreActiveButton {


			background-color: #fff;


			.add {
				height: 100rpx;
				color: #6568F6;
				font-size: 28rpx;
				font-family: Inter;

				.flex-center();
				border: 2rpx solid #f7f7f7;


			}

			.delete {
				.flex-center();
				height: 100rpx;


				color: #FF4636;
				font-size: 28rpx;
				font-family: Inter;
				box-shadow: 2rpx 2rpx 2rpx 30rpx 30rpx rgba(238, 238, 238, 1.0);
			}


		}

		.add {
			height: 100rpx;
			color: #6568F6;
			font-size: 28rpx;
			font-family: Inter;

			.flex-center();
			border: 1px solid #f7f7f7;


		}

		.delete {
			.flex-center();
			height: 100rpx;


			color: #FF4636;
			font-size: 28rpx;
			font-family: Inter;
			box-shadow: 2rpx 2rpx 2rpx 30rpx 30rpx rgba(238, 238, 238, 1.0);
		}


	}

	.bg {
		background-repeat: no-repeat;
		background-size: cover;
		background-image: (var(--bg-image));
		// height: 100vh;
		padding: 20rpx;
         

		.buildContainer {
			.tabsPosition{
				position: relative;
				.sortPosition{
					top:14rpx;
					z-index: 9999;
				    right: 0;
					// background-color: #e3edf5;
					position: absolute;
					padding: 0 20rpx;
				}
				
			}
			// padding: 0 20rpx 20rpx 20rpx;

			.line {
				width: 10rpx;
				height: 30rpx;
				border-radius: 106rpx;
				margin-right: 10rpx;
				background: rgb(120, 93, 246);
			}

			.buildList {

				display: flex;
				flex-direction: column;
				align-items: flex-start;
				padding: 20rpx;
				background: rgb(255, 255, 255);
				margin-top: 20rpx;
				border-radius: 20rpx;

				.tagImg {
					width: 118rpx !important;
					height: 48rpx;
					margin-right: 10rpx;
				}

				.addImg {
					width: 30.02rpx;
					height: 30.02rpx;
				}

				.tagTitle {
					padding: 10rpx 20rpx;
					height: 36rpx;
					border-radius: 12rpx 12rpx 24rpx 12rpx;
					font-size: 20rpx;
					color: rgb(0, 198, 141);
					background: rgb(212, 255, 249);
					margin-right: 5rpx;
				}

				.avaterImg {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					margin-right: 8rpx;
				}

				.tagTitleGay {
					padding: 10rpx 20rpx;
					height: 36rpx;
					border-radius: 12rpx 12rpx 24rpx 12rpx;
					font-size: 20rpx;
					color: #666666;
					background: #F5F5F5;
					margin-right: 5rpx;
				}

				.tagTitleOrange {
					padding: 10rpx 20rpx;
					height: 36rpx;
					border-radius: 12rpx 12rpx 24rpx 12rpx;
					font-size: 20rpx;
					color: rgb(238, 100, 41);
					background: rgba(238, 100, 41, 0.13);
					;
					margin-right: 5rpx;
				}

				.tagTitlePink {
					width: 116rpx;
					height: 36rpx;
					border-radius: 12rpx 12rpx 24rpx 12rpx;
					font-size: 20rpx;
					color: #F95CEF;
					background: #FFF2F8;
					margin-right: 5rpx;
				}

				.location {
					// width: 110rpx;
					padding: 5rpx 10rpx;
					height: 48rpx;
					border-radius: 20rpx;
					margin-left: 15rpx;
					background: rgb(235, 245, 255);
				}

				.pt_img {
					width: 50rpx;
					height: 50rpx;
					margin-right: -30rpx;
					border-radius: 50%;
				}

				.v-p-share {
					padding: 2rpx 2rpx 0 2rpx;

					.v-m-width {
						margin-right: 40rpx;

						.pt_img {
							width: 50rpx;
							height: 50rpx;
							margin-right: -25rpx;
							border-radius: 50%;
						}
					}

					.v-share-friend {
						text {
							color: #294d7d;
							font-size: 24rpx;
							padding-right: 50rpx;
						}

						view {
							color: #ffffff;
							width: 154rpx;
							height: 58rpx;
						}
					}

					.v-share-friend2 {
						text {
							color: #294d7d;
							font-size: 24rpx;
						}
					}
				}

				.orderImg {
					width: 192rpx;
					height: 192rpx;
					border-radius: 30rpx;


				}
				
				.topMounted {

					width: 75rpx;
					height: 36rpx;
					border-radius: 12rpx;
					color: #fff;
					background: rgb(1, 145, 255);
					margin-right: 5rpx;
				}
                .timingImg{
                	width: 38.92rpx;
                	height:  38.92rpx;
                	margin-right: 15rpx;
                }
                
				.addressImg {
					width: 28.5rpx;
					height: 28.12rpx;
				}
			}
		}

		.logo {
			height: 100vh;
			width: 100vw;
			margin-top: 200rpx;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 50rpx;
		}

		.text-area {
			display: flex;
			justify-content: center;
		}

		.title {
			font-size: 36rpx;
			color: #8f8f94;
		}

		.carouselChart {
			// padding: 0 20rpx;
		}

		.search-content {

			// justify-content: center;
			display: flex;
			align-items: center;
			padding: 20rpx;
			margin-bottom: 30rpx;
			height: 76rpx;

			background: rgb(246, 248, 255);
			;
			border-radius: 84rpx;


			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
				margin-left: 20rpx;
			}

			.address-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
				margin-left: 20rpx;
			}

			.icon_close {
				padding: 0rpx 15rpx;
				width: 36rpx;
				height: 36rpx;
				margin-right: 30rpx;
			}

		}
	}
</style>